﻿<!DOCTYPE html>
<html>
  <head>
    <title>语音评论</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/语音评论/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/语音评论/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u1016" class="ax_default _形状">
        <img id="u1016_img" class="img " src="images/语音评论/u1016.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1017" class="ax_default _形状">
        <img id="u1017_img" class="img " src="images/语音评论/u1017.png"/>
        <div id="u1017_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';">按住 评论</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1018" class="ax_default _图片_">
        <img id="u1018_img" class="img " src="images/语音评论/u1018.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1019" class="ax_default _文本段落">
        <img id="u1019_img" class="img " src="images/语音评论/u1019.png"/>
        <div id="u1019_text" class="text ">
          <p style="font-size:18px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">语音评论界面</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">每条语音评论时长为大于</span><span style="font-family:'微软雅黑';font-weight:400;color:#FF0000;">等于1秒、小于10秒</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">点击底部文字输入框区域的“语音评论”&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 按键后，原文字输入框变为语音输入框，输入框内显示提示语“按住 评论”；同时，原“语音评论&quot;按键变为“键盘”&nbsp; &nbsp; &nbsp;&nbsp; 按键，”发送“按键不可点（参考微信）</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">点击”按住 评论“区域后，即使点击时长小于1秒，视频自动暂停播放；用户点击视频界面继续播放视频</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">用户按住”按住评论“区域的过程中进行语音录制，松手即发布</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">用户按住”按住 评论“区域进行语音评论，默认1秒以上（含1秒）为有效评论，不足1秒界面出现感叹号及toast提示”评论时间太短“; &quot;评论时间太短”区域出现时长1秒，半透明底色（如左图）</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">发送成功后的语音框，大小一致，仅在语音框左侧以秒数区别时长；语音框右侧为“播放”按键，用户单击该语音框播放该条语音（如下图），</span><span style="font-family:'微软雅黑';font-weight:400;color:#800080;">语音评论随时长的长短在样式上有长短的区分（具体参考UE文档</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;color:#FF6600;">语音评论播放时，视频不暂停</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u1020" class="compound ax_default _水平线" WidgetHeight="2" WidgetWidth="115" CompoundMode="true">
        <img id="u1020_img" class="singleImg img " src="images/语音评论/u1020.png"/>
        <div id="u1020p000" class="ax_vector_shape" WidgetTopLeftX="-0.475409836065574" WidgetTopLeftY="-0.166666666666667" WidgetTopRightX="0.467213114754098" WidgetTopRightY="-0.166666666666667" WidgetBottomLeftX="-0.475409836065574" WidgetBottomLeftY="0.166666666666667" WidgetBottomRightX="0.467213114754098" WidgetBottomRightY="0.166666666666667">
          <img id="u1020p000_img" class="img " src="images/语音评论/u1020p000.png"/>
        </div>
        <div id="u1020p001" class="ax_vector_shape" WidgetTopLeftX="-0.25" WidgetTopLeftY="-0.5" WidgetTopRightX="28.5" WidgetTopRightY="-0.5" WidgetBottomLeftX="-0.25" WidgetBottomLeftY="0" WidgetBottomRightX="28.5" WidgetBottomRightY="0">
          <img id="u1020p001_img" class="img " src="images/语音评论/u1020p001.png"/>
        </div>
        <div id="u1020p002" class="ax_vector_shape" WidgetTopLeftX="4.70833333333333" WidgetTopLeftY="0.0454545454545455" WidgetTopRightX="-0.0833333333333333" WidgetTopRightY="0.0454545454545455" WidgetBottomLeftX="4.70833333333333" WidgetBottomLeftY="-0.0454545454545455" WidgetBottomRightX="-0.0833333333333333" WidgetBottomRightY="-0.0454545454545455">
          <img id="u1020p002_img" class="img " src="images/语音评论/u1020p002.png"/>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1021" class="ax_default _文本段落">
        <img id="u1021_img" class="img " src="images/语音评论/u1021.png"/>
        <div id="u1021_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">半透明提示框。语音评论不足1秒时出现。出现时长1秒</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1022" class="ax_default _图片_">
        <img id="u1022_img" class="img " src="images/语音评论/u1022.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1023" class="ax_default _文本段落">
        <img id="u1023_img" class="img " src="images/语音评论/u1023.png"/>
        <div id="u1023_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';">语音评论界面</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1024" class="ax_default _图片_">
        <img id="u1024_img" class="img " src="images/语音评论/u1018.png"/>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1025" class="ax_default _图片_">
        <img id="u1025_img" class="img " src="images/语音评论/u1025.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1026" class="ax_default _流程形状">
        <img id="u1026_img" class="img " src="images/语音评论/u1026.png"/>
        <div id="u1026_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;color:#FFFFFF;">评论时间太短</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1027" class="ax_default _流程形状">
        <img id="u1027_img" class="img " src="images/语音评论/u1027.png"/>
        <div id="u1027_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';">3</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1028" class="ax_default _文本段落">
        <img id="u1028_img" class="img " src="images/语音评论/u1028.png"/>
        <div id="u1028_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">录制语音过程中3秒倒数计时</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1029" class="ax_default _文本段落">
        <img id="u1029_img" class="img " src="images/语音评论/u1029.png"/>
        <div id="u1029_text" class="text ">
          <p style="font-size:18px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">语音评论中</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">用户按住“按住 评论”区域进行语音评论过程中，该区域显示灰色蒙层，提示语变为“松开结束”（参考微信）</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">用户按住“按住 评论”区域进行语音评论过程中，界面中间出现蒙层，toast提示”上滑取消发送“、麦克风icon，icon在录制过程中高亮</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">当用户录制到第7秒时，toast提示变为倒数计时“3、2、1”（如左图），然后自动停止录制同时发布，评论栏最上方即时显示此评论框及相关信息</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">若用户录制过程在10秒之内，当用户松开“按住 评论”区域后评论即发布，评论栏最上方即时显示此评论框及相关信息</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;">语音评论过程中，用户手指上滑至离开”松开 结束”区域，评论取消，toast显示为垃圾桶icon（如左图），此toast显示2秒后消失</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:18px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;"><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1030" class="ax_default _文本段落">
        <img id="u1030_img" class="img " src="images/语音评论/u1030.png"/>
        <div id="u1030_text" class="text ">
          <p style="font-size:18px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">语音发送</span></p><p style="font-size:15px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">语音发送不考虑失败逻辑</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">所问语音发送即显示成功</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1031" class="ax_default _流程形状">
        <img id="u1031_img" class="img " src="images/语音评论/u1031.png"/>
        <div id="u1031_text" class="text ">
          <p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1032" class="ax_default _图片_">
        <img id="u1032_img" class="img " src="images/语音评论/u1032.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1033" class="ax_default _文本段落">
        <img id="u1033_img" class="img " src="images/语音评论/u1033.png"/>
        <div id="u1033_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">手指上滑取消发送后蒙层状态：</span></p>
        </div>
      </div>

      <!-- Unnamed (气泡) -->
      <div id="u1034" class="ax_default _形状">
        <img id="u1034_img" class="img " src="images/语音评论/u1034.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1035" class="ax_default _形状">
        <img id="u1035_img" class="img " src="images/语音评论/u1035.png"/>
        <div id="u1035_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">8”</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1036" class="ax_default _图片_">
        <img id="u1036_img" class="img " src="images/语音评论/u1036.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1037" class="ax_default _形状">
        <img id="u1037_img" class="img " src="images/语音评论/u1037.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1038" class="ax_default _形状">
        <img id="u1038_img" class="img " src="images/语音评论/u1016.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1039" class="ax_default _形状">
        <img id="u1039_img" class="img " src="images/语音评论/u1039.png"/>
        <div id="u1039_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';">松开 结束</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1040" class="ax_default _图片_">
        <img id="u1040_img" class="img " src="images/语音评论/u1018.png"/>
      </div>

      <!-- Unnamed (气泡) -->
      <div id="u1041" class="ax_default _形状">
        <img id="u1041_img" class="img " src="images/语音评论/u1034.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1042" class="ax_default _形状">
        <img id="u1042_img" class="img " src="images/语音评论/u1035.png"/>
        <div id="u1042_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;">8”</span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1043" class="ax_default _图片_">
        <img id="u1043_img" class="img " src="images/语音评论/u1036.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1044" class="ax_default _形状">
        <img id="u1044_img" class="img " src="images/语音评论/u1044.png"/>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1045" class="ax_default _图片_">
        <img id="u1045_img" class="img " src="images/语音评论/u1045.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1046" class="ax_default _流程形状">
        <img id="u1046_img" class="img " src="images/语音评论/u1046.png"/>
        <div id="u1046_text" class="text ">
          <p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;color:#FFFFFF;">上滑取消发送</span></p><p><span style="font-family:'微软雅黑';font-weight:400;"><br></span></p>
        </div>
      </div>

      <!-- Unnamed (图片 ) -->
      <div id="u1047" class="ax_default _图片_">
        <img id="u1047_img" class="img " src="images/语音评论/u1047.png"/>
      </div>
    </div>
  </body>
</html>
